<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template slot="label">
          <div>XD-CS-SG</div>
          <div>现代桥梁-城市桥梁-市管桥梁</div>
        </template>
        <xdcssgBridgeList></xdcssgBridgeList>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template slot="label">
          <div>XD-CS-QG</div>
          <div>现代桥梁-城市桥梁-区管桥梁</div>
        </template>
        <xdcsqgBridgeList></xdcsqgBridgeList>
      </el-tab-pane>
      <el-tab-pane name="third">
        <template slot="label">
          <div>XD-CS-TQ</div>
          <div>现代桥梁-城市桥梁-城市天桥</div>
        </template>
        <xdcstqBridgeList></xdcstqBridgeList>
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <template slot="label">
          <div>XD-CS-DD</div>
          <div>现代桥梁-城市桥梁-城市地道</div>
        </template>
        <xdcsddBridgeList></xdcsddBridgeList>
      </el-tab-pane>
      <el-tab-pane name="five">
        <template slot="label">
          <div>GD-XS</div>
          <div>古代桥梁-消失桥梁</div>
        </template>
        <gdxs-bridge-list></gdxs-bridge-list>
      </el-tab-pane>
      <el-tab-pane name="six">
        <template slot="label">
          <div>GD-XC</div>
          <div>古代桥梁-现存桥梁</div>
        </template>
        <gdxc-bridge-list></gdxc-bridge-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import gdxsBridgeList from "./gdxsBridgeList";
import gdxcBridgeList from "./gdxcBridgeList";
import xdcssgBridgeList from "./xdcssgBridgeList";
import xdcsqgBridgeList from "./xdcsqgBridgeList";
import xdcstqBridgeList from "./xdcstqBridgeList";
import xdcsddBridgeList from "./xdcsddBridgeList";

export default {
  name: "List",
  components: {
    gdxsBridgeList,
    gdxcBridgeList,
    xdcssgBridgeList,
    xdcsqgBridgeList,
    xdcstqBridgeList,
    xdcsddBridgeList,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
::v-deep .el-tabs__item {
  height: 55px !important;
  line-height: 25px;
  text-align: center;
  color: #437bc5 !important;
}
::v-deep .el-tabs__item.is-active {
  color: #fff !important;
  background: #437bc5 !important;
}
</style>
